<style>
	.red-order {
		background-color: rgba(255, 0, 0, 0.3);
		color: #FF0000;
		border-radius: 5px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.blue-order {
		background-color: rgba(0, 0, 255, 0.3);
		color: #004CFF;
		border-radius: 5px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 外层开关容器 */
	.switch {
		position: relative;
		display: inline-block;
		width: 50px;
		height: 24px;
	}

	/* 隐藏默认的checkbox */
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	/* 滑块 */
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		transition: .4s;
		border-radius: 34px;
		min-height: 24px;
	}

	.slider:before {
		position: absolute;
		content: "";
		height: 18px;
		width: 18px;
		left: 4px;
		bottom: 3px;
		background-color: white;
		transition: .4s;
		border-radius: 50%;
	}

	/* 当checkbox被选中时 */
	input:checked + .slider {
		background-color: #4caf50; /* 可以根据需求改变颜色 */
	}

	input:checked + .slider:before {
		transform: translateX(26px);
	}
</style>
<div class="panel panel-default panel-intro">
	<div class="panel-heading">
		{:build_heading(null,FALSE)}
		<ul class="nav nav-tabs" data-field="is_reconciliation">
			<li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
			{foreach name="reconciliationList" item="vo"}
			<li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
			{/foreach}
		</ul>
	</div>
	<div class="panel-body">
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade active in" id="one">
				<div class="widget-body no-padding">
					<div id="toolbar" class="toolbar">
						{:build_toolbar('refresh,delete')}
						<div class="dropdown btn-group ">
							<a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
							<ul class="dropdown-menu text-left" role="menu">
								<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="is_reconciliation=1"><i class="fa fa-eye"></i> {:__('设置为已对账')}</a></li>
								<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="is_reconciliation=0"><i class="fa fa-eye-slash"></i> {:__('设置为未对账')}</a></li>
							</ul>
						</div>
						<a href="javascript:;" class="btn btn-success btn-export {:$auth->check('wanlshop/integral_account/export')?'':'hide'}" id="btn-export-file">
							<i class="fa fa-download"></i> {:__('Export')}
						</a>

							<span id="all_points">总积分:0</span>
							<span id="all_price">总抵扣金额:0</span>
<!--						</div>-->
<!--						<a class="btn btn-warning btn-recyclebin btn-dialog {:$auth->check('wanlshop/order/recyclebin')?'':'hide'}" href="wanlshop/order/recyclebin" title="{:__('Recycle bin')}"><i class="fa fa-recycle"></i> {:__('Recycle bin')}</a>-->
					</div>
					<table id="table" data-show-export="false" data-show-toggle="false" data-show-columns="false" class="table" width="100%"></table>
				</div>
			</div>

		</div>
	</div>
</div>
<script type="text/html" id="itemtpl">
	<% if(i == 0){ %>
		<div class="col-sm-12" style="margin-bottom: 15px;">
			<table class="table table-bordered table-striped table-hover table-nowrap">
			   <thead>
				   <tr>
						<th class="text-center"><div class="th-inner">商品</div></th>
					   	<th class="fix-108"><div class="th-inner">状态</div></th>
						<th class="fix-108"><div class="th-inner">单价</div></th>
						<th class="fix-108"><div class="th-inner">数量</div></th>
						<th class="fix-108"><div class="th-inner">买家</div></th>
						<th class="fix-108"><div class="th-inner">实际支付</div></th>
					   	<th class="fix-108"><div class="th-inner">抵扣积分</div></th>
					   	<th class="fix-108"><div class="th-inner">抵扣金额</div></th>
					   	<th class="fix-108"><div class="th-inner">是否对账</div></th>
				   </tr>
			   </thead>
			</table>
		</div>
	<% } %>
	<div class="wanl_order_list col-sm-12">
		<table class="table table-bordered table-hover ">
			<thead>
				<tr>
					<th colspan="10">
						<div class="th-inner">
							<input name="checkbox" data-id="<%=item.id%>" id="order_<%=item.id%>" type="checkbox" /> 
							<label for="order_<%=item.id%>">订单号：<%=item.order_no%></label>
							<label style="margin-left:60px;" for="order_<%=item.id%>">创建时间：<%=Moment(item.createtime*1000).format("YYYY-MM-DD HH:mm:ss")%></label>
							<a href="javascript:;" style="margin-left:60px;" class="searchit text-primary" data-toggle="tooltip" title="" data-field="shop.shopname" data-value="<%=item.shop.shopname%>" data-original-title="点击搜索 <%=item.shop.shopname%>"> <i class="fa fa-shopping-cart"></i> <%=item.shop.shopname%> </a>
						</div>
					</th>
				</tr>			   
			</thead>

			<tbody>
				<% for(var k = 0 ; k < item.ordergoods.length ; k ++){ %>
				    <% var goods = item.ordergoods[k]; %>
					<% var labelarr = ['primary', 'success', 'info', 'danger', 'warning', 'muted']; %>
				    <tr>
				    	<td class="conceal">
							<div class="item">
								<div class="order_img">
									<a href="javascript:"><img class="img-md img-center" src="<%=cdnurl(goods.image)%>" alt="<%=goods.title%>"></a>
								</div>
								<div class="order_info">
									<p><%=goods.title%></p>
									<p class="sku"><%=goods.difference%></p>
								</div>
							</div>
				    	</td>
						<td class="conceal fix-108">
							<div class="<%= item.is_reconciliation == 1 ? 'blue-order' : 'red-order' %>">
								<div><%= item.is_reconciliation == 1 ? '已对账' : '未对账' %></div>
							</div>
						</td>
				    	<td class="conceal fix-108">
				    		<p> <del>￥<%=goods.price%></del> </p>
				    		<p>￥<%=goods.actual_payment%></p>
				    	</td>
						<!-- 1.1.6 升级 -->
						<td class="conceal fix-108">
							<p>x<%=goods.number%></p>	
							<p><a href="javascript:;" class="refund" data-id="<%=goods.refund_id%>"><%=goods.refund_status_text%></a></p>
						</td>
						<% if(k == 0){ %>
				    	<td class="fix-108">
				    		<p style="margin-bottom:5px;">
				    			<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="user.nickname" data-value="<%=item.user.nickname%>" data-original-title="点击搜索 <%=item.user.nickname%>"><%=item.user.nickname%></a>
				    		</p>
				    	</td>
						<td class="fix-108">
							<p><strong>￥<%= item.pay.price %></strong> </p>
							<p style="color:#6c6c6c;font-family:verdana;margin-bottom:3px;"> (含运费：￥<%= item.pay.freight_price %>) </p>
						</td>
						<td class="fix-108">
							<p><strong><%= goods.deduct_points %></strong> </p>
						</td>
						<td class="fix-108">
							<p><strong><%= goods.deductAmount %></strong> </p>
						</td>
						<td class="fix-108">
							<label class="switch">
								<input type="checkbox" class="toggle-reconciliation"
								<% if (item.is_reconciliation == 1) { %> checked <% } %>
								data-id="<%= item.id %>">
								<span class="slider"></span>
							</label>
						</td>
						<% }else{ %>
						<td class="empty"> </td>
						<td class="empty"> </td>
						<td class="empty"> </td>
						<% } %>
				    </tr>
				<% } %>
			</tbody>
		</table>
	</div>
</script>
<style type="text/css">
	@page {
		size: auto;
		margin: 0mm;
	}
	.wanl_order_list{
		margin-bottom: 15px;
	}
	.wanl_order_list .detail{
		
	}
	.fix-108{
		width: 108px;
		text-align: center;
	}
	.text-left{
		text-align: left;
	}
	.text-right{
		text-align: right;
	}
	.wanl_order_list .table>thead{
		background: #f9fafc;
	}
	.bootstrap-table .table,
	.bootstrap-table .table>thead>tr>th{
		border-bottom: 1px solid #f1f1f1;
	}
	.table-bordered{
		border: 1px solid #f1f1f1;
	}
	.table-bordered > thead > tr > th, 
	.table-bordered > tbody > tr > td {
		border: 1px solid #f1f1f1;
		border-bottom: 0;
	}
	.table-bordered > thead > tr > th, label{
		margin-bottom: 0;
		font-weight: normal;
	}
	.table-bordered > tbody td.empty{
		border-top: 0;
	}
	.table-bordered > tbody td.conceal{
		border-left: 0 ;
		border-right: 0 ;
	}
	.table-bordered > tbody td.conceal.fix-108{
	}
	.table-hover > tbody > tr:hover {
	  background-color: #fffbfb;
	}
	/* 产品 */
	.wanl_order_list p{
		margin-bottom: 4px;
	}
	.wanl_order_list .item {
		display: flex;
		margin: 10px;
	}
	
	.wanl_order_list .item .order_img {
		overflow: hidden;
		border-radius: 6px;
		flex-shrink: 0;
	}
	.wanl_order_list .item .order_info {
		width: 90%;
		margin-left: 10px;
		margin-top: 2px;
	}
	.wanl_order_list .item .order_info .sku {
		color: #9e9e9e;
	}
	
	.wanl_order_list .refund{
		color: #e74c3c; font-size: 12px;
	}
	
	.wanl_order_list .operation a{
		color: #565656;
	}
	.no-records-found{
		background-color: #fffbfb;
	}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function() {
		console.log('事件绑定了');
		$(document).on('change', '.toggle-reconciliation', function() {
			console.log('滑块改变');

			// 获取元素上的 ID 和状态
			var id = $(this).data('id');
			var isChecked = $(this).is(':checked') ? 1 : 0;

			// 打印 ID 和状态，检查是否获取正确
			console.log('ID:', id, '状态:', isChecked);

			// 发起 AJAX 请求
			$.ajax({
				url: 'wanlshop/integral_account/reconciliation',  // 替换为你的实际请求路径
				type: 'POST',
				data: { id: id, is_reconciliation: isChecked },
				success: function(response) {
				},
				error: function(error) {
				}
			});
		});
	});
</script>